$(function(){
    // 登录等出
    const nickname = getCookie('nickname')
    console.log(nickname)
    if(nickname){
      $('.off').addClass('hide')
      $('.bind-off').addClass('hide')
      $('.qq-off').addClass('hide')
      $('.on').removeClass('hide').html(`欢迎您，${nickname} &nbsp;&nbsp;<a href='' title="登录">退出</a>`)
      $('.qq-on').removeClass('hide').html(`<img src="../img/list/zb-list.jpg" alt="" class="lf">
      <p>
      ${nickname}
      </p>`)
      $('.bind-on').removeClass('hide')
      $('.on > a').on('click',function(){setCookie('nickname',nickname,-1);console.log('11')})
      setCartNum()
    }else{
      $('.bind-on').addClass('hide')
      $('.bind-off').removeClass('hide')
      $('.on').addClass('hide')
      $('.qq-on').addClass('hide')
      $('.off').removeClass('hide')
      $('.qq-off').removeClass('hide')
    }

    // 得到数据
    let info = null

    // 1. 拿到 cookie 中的 goods_id 属性
    const id = getCookie('goods_id')

    // 2. 根据 id 信息去请求商品数据
    getGoodsInfo()
    async function getGoodsInfo() {
        const goodsInfo = await $.get('../server/getGoodsInfo.php', { id: id }, null, 'json')

        // 3. 进行页面的渲染
        bindHtml(goodsInfo.info)

        // 给提前准备好的变量进行赋值
        info = goodsInfo.info
    }

    // 渲染页面
    function bindHtml(info) {
        // 2. 商品详细信息渲染
        $('.goodsBox').html(`
        <div class="imgBox">
        <img src="${ info.img }" alt="">
        </div>
        <div class="goods">
            <h2>${ info.name }</h2>
            <div class="goods-bg">
                <dl>
                    <dt>Q币价: </dt>
                    <dd>${ info.qb_pric }秋币</dd>
                </dl>
                <dl>
                    <dt>微信价: </dt>
                    <dd>
                        <span>￥${ info.rmb_num }</span>
                    </dd>
                </dl>
                <dl class="pt18">
                    <dt>期限:</dt>
                    <dd>永久</dd>
                </dl>
                <span class="buy-btn">
                    <a class="blu" data-id="${ info.Id }">加入购物车</a>
                    <a href="../pages/list.html" class="red">继续选购</a>
                </span>
            </div>
        </div>
        `)
    
        // 3. 商品参数渲染
        $('.goodsDesc').html(info.goods_introduce)
      }


    // 购物车
    function setCartNum() {
      // 拿到 localStorage 里面的那个数组
      
      const cart = JSON.parse(window.localStorage.getItem('cart')) || []
      // 3-2. 判断 cart 是一个 [], 那么就用 0 填充到指定位置
      if (!cart.length) {
        $('.car-Num').html('0')
        return
      }
    
      // 3-3. 能来到这里, 表示购物车里面有数据
      // 需要把每一条数据的 cartNum 叠加咋一起
      let count = 0
      cart.forEach(item => count += item.cart_number - 0)
      console.log($('.car-Num'))
      $('.car-Num').html(count)
    }



     // 加入购物车
    $('.goodsBox').on('click', '.blu', function () {
        
        const cart = JSON.parse(window.localStorage.getItem('cart')) || []
        const id = $(this).data('id')
        const flag = cart.some(item => item.Id === id)
        
        if (flag) {
          
          const cart_goods = cart.filter(item => item.Id === id)[0]
          cart_goods.cart_number = cart_goods.cart_number - 0 + ($('.cartNum').val() - 0)
        } else {
          info.cart_number = 1
          
          cart.push(info)
          // setCartNum(info)
        }
        
        window.localStorage.setItem('cart', JSON.stringify(cart))
        setCartNum()
      })
      
})